<template>
  <div>
    <div>
      <h2 style="font-weight: bolder;text-align: center;width: 50%;margin: 0 auto;">{{ msgInfo.title }}</h2>
      <div style="text-align: center;padding: 20px;">{{ msgInfo.createTime }}</div>
    </div>
    <div class="msg-text">
      <img :src="msg.link.picUrl"
           style="padding-bottom:20px;width:500px">

      <div style="text-indent: 2em;text-align: left;margin: 0 auto;padding-bottom:50px">{{ msgInfo.details }}
      </div>
      <a-button action
                type="primary"
                @click="click(msg.link.messageUrl)">查看详情</a-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msgInfo: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      msg: {}
    }
  },
  created () {
    this.msg = JSON.parse(this.msgInfo.msg)
  },
  mounted () { },
  methods: {
    click (url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped>
.msg-text {
  border-top: 1px solid #e8e8e8;
  padding-top: 20px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 1px;
  line-height: 25px;
}
</style>
